<template>
  <view class="schedule-container">
    <view class="header">
      <view class="user-info">
        <text class="welcome">欢迎，{{ userInfo.username }}</text>
        <text class="role">学生</text>
      </view>
      <view class="week-selector">
        <text class="week-label">第{{ currentWeek }}周</text>
        <picker @change="onWeekChange" :value="weekIndex" :range="weekRange" class="week-picker">
          <button size="mini" class="picker-btn">选择周次</button>
        </picker>
      </view>
    </view>

    <view class="schedule-content">
      <view class="week-days">
        <view class="day-header" v-for="day in weekDays" :key="day.value">
          <text class="day-name">{{ day.name }}</text>
        </view>
      </view>
      
      <scroll-view scroll-y class="schedule-table">
        <view class="time-slots">
          <view class="time-slot" v-for="time in timeSlots" :key="time">
            <text class="time-label">{{ time }}</text>
          </view>
        </view>
        
        <view class="days-container">
          <view class="day-column" v-for="day in 7" :key="day">
            <view 
              class="course-slot" 
              v-for="time in timeSlots" 
              :key="time"
              @click="onCourseSlotClick(day, time)"
            >
              <view 
                v-if="getCourse(day, time)" 
                class="course-item"
                :style="{ backgroundColor: getCourseColor(day, time) }"
              >
                <text class="course-name">{{ getCourse(day, time)?.courseName }}</text>
                <text class="course-location">{{ getCourse(day, time)?.classroom }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 课程详情弹窗 -->
    <uni-popup ref="coursePopup" type="center">
      <view class="course-detail" v-if="selectedCourse">
        <text class="detail-title">课程详情</text>
        <view class="detail-item">
          <text class="label">课程名称：</text>
          <text class="value">{{ selectedCourse.courseName }}</text>
        </view>
        <view class="detail-item">
          <text class="label">授课教师：</text>
          <text class="value">{{ selectedCourse.teacher }}</text>
        </view>
        <view class="detail-item">
          <text class="label">教室：</text>
          <text class="value">{{ selectedCourse.classroom }}</text>
        </view>
        <view class="detail-item">
          <text class="label">时间：</text>
          <text class="value">周{{ ['一','二','三','四','五','六','日'][selectedCourse.weekday-1] }} {{ selectedCourse.startTime }}-{{ selectedCourse.endTime }}</text>
        </view>
        <button class="close-btn" @click="$refs.coursePopup.close()">关闭</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'

export default {
	components: {
	    uniPopup
	  },
  data() {
    return {
      userInfo: {},
      currentWeek: 1,
      weekIndex: 0,
      weekRange: Array.from({length: 20}, (_, i) => `第${i+1}周`),
      weekDays: [
        { name: '周一', value: 1 },
        { name: '周二', value: 2 },
        { name: '周三', value: 3 },
        { name: '周四', value: 4 },
        { name: '周五', value: 5 },
        { name: '周六', value: 6 },
        { name: '周日', value: 7 }
      ],
      timeSlots: ['08:00', '10:00', '14:00', '16:00', '19:00'],
      courses: [],
      selectedCourse: null
    }
  },
  
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {}
    this.loadSchedule()
  },
  
  onPullDownRefresh() {
    this.loadSchedule().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    async loadSchedule() {
      try {
        const res = await api.getCourseSchedule({ week: this.currentWeek })
        if (res.code === 200) {
          this.courses = res.data
        }
      } catch (error) {
        console.error('加载课程表失败:', error)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    
    getCourse(weekday, time) {
      return this.courses.find(course => 
        course.weekday === weekday && 
        course.startTime <= time && 
        course.endTime >= time
      )
    },
    
    getCourseColor(weekday, time) {
      const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
      const course = this.getCourse(weekday, time)
      if (!course) return 'transparent'
      
      // 根据课程ID生成固定颜色
      const index = parseInt(course.courseId.replace(/\D/g, '')) % colors.length
      return colors[index]
    },
    
    onCourseSlotClick(weekday, time) {
      const course = this.getCourse(weekday, time)
      if (course) {
        this.selectedCourse = course
        this.$refs.coursePopup.open()
      }
    },
    
    onWeekChange(e) {
      this.weekIndex = e.detail.value
      this.currentWeek = this.weekIndex + 1
      this.loadSchedule()
    }
  }
}
</script>

<style scoped>
.schedule-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: white;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.user-info {
  margin-bottom: 30rpx;
}

.welcome {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.role {
  font-size: 24rpx;
  color: #666;
}

.week-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.week-label {
  font-size: 32rpx;
  font-weight: bold;
}

.picker-btn {
  background: #667eea;
  color: white;
  border: none;
}

.schedule-content {
  flex: 1;
}

.week-days {
  display: flex;
  background: white;
  border-bottom: 1rpx solid #eee;
}

.day-header {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
}

.day-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.schedule-table {
  height: calc(100vh - 300rpx);
  display: flex;
}

.time-slots {
  width: 120rpx;
  background: white;
}

.time-slot {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #eee;
}

.time-label {
  font-size: 24rpx;
  color: #666;
}

.days-container {
  flex: 1;
  display: flex;
}

.day-column {
  flex: 1;
  border-right: 1rpx solid #eee;
}

.course-slot {
  height: 120rpx;
  border-bottom: 1rpx solid #eee;
  padding: 2rpx;
}

.course-item {
  height: 100%;
  border-radius: 8rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-name {
  font-size: 22rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 5rpx;
}

.course-location {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.9);
}

.course-detail {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.detail-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
}

.label {
  font-weight: bold;
  color: #333;
  min-width: 120rpx;
}

.value {
  color: #666;
  flex: 1;
}

.close-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 30rpx;
}
</style>